第三階段開始，今天要申請 Google Maps API 金鑰，並了解我們會用到哪些子服務。

需要哪些 API？

Google Maps Platform 底下有很多子服務，這個專案主要會用到三個：

• Maps JavaScript API： 在網頁上顯示互動地圖。
• Directions API： 計算兩點之間的路線與所需時間。
• Places API（選用）： 讓使用者用地點名稱搜尋，而不用手動輸入經緯度。

申請步驟

1. 前往 Google Cloud Console（https://console.cloud.google.com/） 建立一個新專案。
2. 在「API 和服務」中，啟用上述三個 API。
3. 在「憑證」頁面建立一組 API 金鑰。
4. 重要安全設定：務必替金鑰加上「網站限制」（HTTP referrer restrictions），只允許你的開發網域與正式網域使用，避免金鑰被盜用而產生高額費用。

費用提醒

Google Maps API 是需要綁定信用卡的付費服務，但有每月固定額度的免費使用量，個人專案或課堂作業通常足夠。開發時建議在 Google Cloud Console 設定「預算警示」，避免不小心超支。

把金鑰加入專案

延續 Day 6 的做法，在 .env 中新增一行：

VITE_TDX_CLIENT_ID=你的ClientID
VITE_TDX_CLIENT_SECRET=你的ClientSecret
VITE_GOOGLE_MAPS_API_KEY=你的GoogleMapsKey

載入 Google Maps 的方式

有兩種常見做法：一是直接在 index.html 用 <script> 標籤載入，二是用官方的 @googlemaps/js-api-loader npm 套件動態載入。我們選第二種，因為它跟 Vite 的模組化開發方式比較搭：

npm install @googlemaps/js-api-loader

今天先把帳號、金鑰、套件都準備好，明天我們就要正式在畫面上畫出第一張地圖。